<template>
  <view class="start">
    <view class="input-view">
        <view>姓氏：</view>
        <input v-model="userInput" placeholder="请输入姓氏" class="user-input" />
    </view>

    <view class="radio-content">
      <fui-radio-group name="radio" v-model="moshi" @change="change">
      <view class="fui-list__item ms">
        <fui-label>
          <view class="fui-align__center">
            <fui-radio :color="color" :scaleRatio="scaleRatio" value="1" checked></fui-radio>
            <text class="fui-text">传统</text>
          </view>
        </fui-label>
        <fui-label >
          <view class="fui-align__center radio-right">
            <fui-radio :color="color" :scaleRatio="scaleRatio" value="2"></fui-radio>
            <text class="fui-text">智能</text>
          </view>
        </fui-label>
      </view>
    </fui-radio-group>

    <fui-radio-group name="radio" v-model="unborn" @change="change">
      <view class="fui-list__item">
        <fui-label>
          <view class="fui-align__center">
            <fui-radio :color="color" :scaleRatio="scaleRatio" value="1" checked></fui-radio>
            <text class="fui-text">已出生</text>
          </view>
        </fui-label>
        <fui-label>
          <view class="fui-align__center radio-right">
            <fui-radio :color="color" :scaleRatio="scaleRatio"  value="2"></fui-radio>
            <text class="fui-text">未出生</text>
          </view>
        </fui-label>
      </view>
    </fui-radio-group>

    </view>

    <view class="born">
      <view>预产期：</view>
      <view @click="dadteShow = true" class="born-content">{{bornContent ? bornContent.result : "请选择出生日期"}} </view>

    </view>


    <view class="sex-radio-content">
      <fui-radio-group name="radio" v-model="s" @change="sexChange">
      <view class="fui-list__item">
        <fui-label>
          <view class="fui-align__center">
            <fui-radio :color="color" :scaleRatio="scaleRatio" value="0" checked></fui-radio>
            <text class="fui-text">男孩</text>
          </view>
        </fui-label>
        <fui-label >
          <view class="fui-align__center radio-right">
            <fui-radio :color="color" :scaleRatio="scaleRatio" value="1"></fui-radio>
            <text class="fui-text">女孩</text>
          </view>
        </fui-label>
      </view>
    </fui-radio-group>
    </view>
    

    <view class="commit" @click="commit" :class="sizeStatus ? 'commit-big' : 'commit-small'"></view> 
    <LandscapeModel v-model:show="show" :sonFun="sonFun"/>

    <fui-date-picker :show="dadteShow" type="5" @change="showChange" @cancel="dadteShow=false"></fui-date-picker>
  </view>
</template>

<script setup lang="ts">
import LandscapeModel from "@/components/Landscape/LandscapeModel.vue";
import { EnumStatus } from "@/utils/constants";
import dyUserPlayingService from "@/api/dyUserPlayingService";
import { badyName } from "@/utils/ab";
const sizeStatus = ref(false)
const show = ref(false)
const dadteShow = ref(false)
const scaleRatio = ref(0.7)
const emit = defineEmits(['update:defStatus','update:content'])
const userInput = ref()
const s= ref("0")
const unborn =ref(0)
const moshi = ref()
const color = ref("#f0ad4e")
const sonFun = async()=>{
    const data = await  badyName([
      userInput.value,
      s.value,
      bornContent.value,
      bornContent.value['result'].split(' ')[0]
    ])
    
    emit('update:defStatus',EnumStatus.RESULT)
    emit('update:content',[userInput.value,s.value,bornContent.value['result'].split(' ')[0],data])
}
const bornContent = ref()
const change = ()=>{

}
const sexChange = (e:any)=>{
}

const startTimer = () => {
    setInterval(() => {
        sizeStatus.value =  !sizeStatus.value
    }, 1000); // 每秒执行一次
  };

  const commit = async ()=>{
    if(!userInput.value || !bornContent.value){
        uni.showToast({
        title: "请输入姓氏或者请选择出生日期",
        duration: 2000,
        icon:"none"
      });
      return
    }
    uni.showLoading({
        title: "加载中",
        icon: "none",
    });
    // 敏感词校验
    const {result}  = await dyUserPlayingService.sensitiveWord({word:userInput.value})
    if(result){
        uni.hideLoading()
        uni.showToast({
            title: '存在敏感词,请重新填写',
            duration: 2000,
            icon:"none"
        });
        return
    }
    uni.hideLoading()
    show.value = true
}
const showChange = (e:any) =>{
  bornContent.value = e
  dadteShow.value = false
}

onMounted(()=>{
      startTimer()
  })
</script>

<style lang="scss" scoped>
.start{
  .fui-list__item{
    font-size: 28rpx;
    color: $uni-color-warning;
    .fui-align__center{
      width: 200rpx;
      margin-top: 20rpx;
    }
    .ms{
      margin-top: 40rpx;
    }
    .fui-text{
      margin-left: 10rpx;
    }
        display: flex;
        justify-content: center;
        .radio-right{
          position: relative;
          left: 60rpx;
        }
      }
    .commit{
      z-index: 102;
      position: absolute;
      top: 80%;
      width: 46%;
      height: 100rpx;
      left: 27%;
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      background-image: url("http://img-miniprogram-o.doutuimao.net/rtsvip/common/2022/08/15/2022081520142612424779.png");
    }
    .input-view{
        z-index: 102;
        position: absolute;
        display: flex;
        align-items: center;
        top: 45%;
        left: 18%;
        width: 64%;
        color: white;
        font-size: 28rpx;
        .user-input{
            height: 60rpx;
            width: 70%;
            text-align: center;
            border-radius: 8rpx;
            border: 1rpx solid black;
            box-shadow: 0  4rpx 4rpx rgba(0, 0, 0, 1); /* 设置黑色阴影 */
            padding:0 20rpx;
        }
    }
    .radio-content{
      z-index: 102;
      position: absolute;
      top: 50%;
      left: 22%;
    }
    .born{
      z-index: 102;
        position: absolute;
        display: flex;
        align-items: center;
        top: 60%;
        left: 18%;
        width: 64%;
        color: white;
        font-size: 28rpx;
        .born-content{
            height: 60rpx;
            width: 70%;
            text-align: center;
            border-radius: 8rpx;
            line-height: 60rpx;
            border-bottom: 1rpx solid black;
            padding:0 20rpx;
        }
    }

    .sex-radio-content{
      z-index: 102;
      position: absolute;
      top: 65%;
      left: 22%;
    }

    .commit-big{
      width: 50%;
      height: 105rpx;
      left: 25%;
      transition: all 1s;
  }
  .commit-small{
      width: 46%;
      height: 100rpx;
      left: 27%;
      transition: all 1s;
  }
}

</style>
